<!--
 * @Author: 杨有财
 * @Date: 2025-01-06 01:30:48
 * @LastEditTime: 2025-02-27 15:27:00
 * @LastEditors: 杨有财
 * @Description: 用来渲染 iframe 的页面
 * {
      path: 'TDesign',
      name: 'TDesign',
      component: 'IFrame',
      meta: {
        frameSrc: 'https://tdesign.tencent.com/vue-next/getting-started',
        title: {
          zh_CN: 'TDesign 文档（内嵌）',
          en_US: 'TDesign (IFrame)',
        },
      },
    },
    {
      path: 'TDesign2',
      name: 'TDesign2',
      component: 'IFrame',
      meta: {
        frameSrc: 'https://tdesign.tencent.com/vue-next/getting-started',
        frameBlank: true,
        title: {
          zh_CN: 'TDesign 文档（外链',
          en_US: 'TDesign Doc(Link)',
        },
      },
  },
-->

<template>
  <div v-if="showFrame">
    <template v-for="frame in getFramePages" :key="frame.path">
      <frame-content v-if="hasRenderFrame(frame.name)" v-show="showIframe(frame)" :frame-src="frame.meta.frameSrc" />
    </template>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, unref } from 'vue';

import FrameContent from '../components/FrameContent.vue';
import { useFrameKeepAlive } from './useFrameKeepAlive';

export default defineComponent({
  name: 'FrameLayout',
  components: { FrameContent },
  setup() {
    const { getFramePages, hasRenderFrame, showIframe } = useFrameKeepAlive();

    const showFrame = computed(() => unref(getFramePages).length > 0);

    return { getFramePages, hasRenderFrame, showIframe, showFrame };
  },
});
</script>
